<!DOCTYPE html>
<html class=''>
<head>
    <meta charset='UTF-8'>
    <meta name="robots" content="noindex">
    <link rel='stylesheet' href='http://s.codepen.io/assets/reset/normalize.css'>
    <style class="cp-pen-styles">
        .book {
            -webkit-transition: opacity 0.4s 0.2s;
            transition: opacity 0.4s 0.2s;
        }

        .page {
            width: 36vw;
            height: 27vw;
            background-colour: #ffffff;
            float: left;
            margin-bottom: 0.5em;
        }

        .page:first-child {
            float: right;
        }

        .page:nth-child(even) {
            clear: both;
        }

        .bound {
            -webkit-perspective: 250vw;
            perspective: 250vw;
        }

        .bound .pages {
            width: 72vw;
            height: 27vw;
            position: relative;
            -webkit-transform: rotateX(12deg);
            transform: rotateX(12deg);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 4px;
            box-shadow: 0 0 0 1px #e3dfd8;
        }

        .bound .page {
            float: none;
            clear: none;
            margin: 0;
            position: absolute;
            top: 0;
            width: 36vw;
            height: 27vw;
            -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transition: -webkit-transform 1.4s;
            transition: transform 1.4s;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .bound .page:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0);
            -webkit-transition: background 0.7s;
            transition: background 0.7s;
            z-index: 2;
        }

        .bound .page:nth-child(odd) {
            pointer-events: all;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
            right: 0;
            border-radius: 0 4px 4px 0;
        }

        .bound .page:nth-child(odd):hover {
            -webkit-transform: rotateY(-10deg);
            transform: rotateY(-10deg);
        }

        .bound .page:nth-child(odd):hover:before {
            background: rgba(0, 0, 0, 0.03);
        }

        .bound .page:nth-child(odd):before {
            background: rgba(0, 0, 0, 0);
        }

        .bound .page:nth-child(even) {
            pointer-events: none;
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            -webkit-transform-origin: 100% 0;
            -ms-transform-origin: 100% 0;
            transform-origin: 100% 0;
            left: 0;
            border-radius: 4px 0 0 4px;
        }

        .bound .page:nth-child(even):before {
            background: rgba(0, 0, 0, 0.2);
        }

        .bound .page.grabbing {
            -webkit-transition: none;
            transition: none;
        }

        .bound .page.flipped:nth-child(odd) {
            pointer-events: none;
            -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }

        .bound .page.flipped:nth-child(odd):before {
            background: rgba(0, 0, 0, 0.2);
        }

        .bound .page.flipped:nth-child(even) {
            pointer-events: all;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

        .bound .page.flipped:nth-child(even):hover {
            -webkit-transform: rotateY(10deg);
            transform: rotateY(10deg);
        }

        .bound .page.flipped:nth-child(even):hover:before {
            background: rgba(0, 0, 0, 0.03);
        }

        .bound .page.flipped:nth-child(even):before {
            background: rgba(0, 0, 0, 0);
        }

        *,
        * :before,
        *:after {
            box-sizing: border-box;
        }

        html,
        body {
            background: #e3dfd8;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        html {
            height: 100%;
        }

        body {
            min-height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 2em 0;
            font-family: menlo, monospace;
            line-height: 1.5em;
        }

        .page {
            line-height: 27vw;
            text-align: center;
        }

        .page {
            color: transparent;
            background: left top no-repeat;
            background-size: cover;
        }

        .page:nth-child(3),
        .page:nth-child(5),
        .page:nth-child(7),
        .page:nth-child(9),
        .page:nth-child(11),
        .page:nth-child(13),
        .page:nth-child(15),
        .page:nth-child(17),
        .page:nth-child(19),
        .page:nth-child(21),
        .page:nth-child(23),
        .page:nth-child(25),
        .page:nth-child(27),
        .page:nth-child(29),
        .page:nth-child(31) {
            background-position: right top;
        }

        .page:nth-child(1) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_cover_f.jpg');
        }

        .page:nth-child(2),
        .page:nth-child(3) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_end_01.jpg');
        }

        .page:nth-child(4),
        .page:nth-child(5) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00000.jpg');
        }

        .page:nth-child(6),
        .page:nth-child(7) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00001.jpg');
        }

        .page:nth-child(8),
        .page:nth-child(9) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00002.jpg');
        }

        .page:nth-child(10),
        .page:nth-child(11) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00003.jpg');
        }

        .page:nth-child(12),
        .page:nth-child(13) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00004.jpg');
        }

        .page:nth-child(14),
        .page:nth-child(15) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00005.jpg');
        }

        .page:nth-child(16),
        .page:nth-child(17) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00006.jpg');
        }

        .page:nth-child(18),
        .page:nth-child(19) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00007.jpg');
        }

        .page:nth-child(20),
        .page:nth-child(21) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00008.jpg');
        }

        .page:nth-child(22),
        .page:nth-child(23) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00009.jpg');
        }

        .page:nth-child(24),
        .page:nth-child(25) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00010.jpg');
        }

        .page:nth-child(26),
        .page:nth-child(27) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00011.jpg');
        }

        .page:nth-child(28),
        .page:nth-child(29) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_spread_00012.jpg');
        }

        .page:nth-child(30),
        .page:nth-child(31) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_end_02.jpg');
        }

        .page:nth-child(32) {
            background-image: url('http://jasonhibbs.co.uk/wp-content/uploads/2015/02/bh_cover_b.jpg');
        }
    </style>
</head>
<body>

<div class="book bound">
    <div class="pages">
        <div class="page">front</div>
        <div class="page">ends</div>
        <div class="page">ends</div>
        <div class="page">info</div>
        <div class="page">title</div>
        <div class="page">01</div>
        <div class="page">02</div>
        <div class="page">03</div>
        <div class="page">04</div>
        <div class="page">05</div>
        <div class="page">06</div>
        <div class="page">07</div>
        <div class="page">08</div>
        <div class="page">09</div>
        <div class="page">10</div>
        <div class="page">11</div>
        <div class="page">12</div>
        <div class="page">13</div>
        <div class="page">14</div>
        <div class="page">15</div>
        <div class="page">16</div>
        <div class="page">17</div>
        <div class="page">18</div>
        <div class="page">19</div>
        <div class="page">20</div>
        <div class="page">21</div>
        <div class="page">22</div>
        <div class="page">23</div>
        <div class="page">24</div>
        <div class="page">ends</div>
        <div class="page">ends</div>
        <div class="page">back</div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    var pages = $('.pages').children();
    var grabs = false;
    pages.each(function (i) {
        var page = $(this);
        if (i % 2 === 0) {
            page.css('z-index', pages.length - i);
        }
    });
    $(window).load(function () {
        $('.page').click(function () {
            var page = $(this);
            var page_num = pages.index(page) + 1;
            if (page_num % 2 === 0) {
                page.removeClass('flipped');
                page.prev().removeClass('flipped');
            } else {
                page.addClass('flipped');
                page.next().addClass('flipped');
            }
        });
        if (grabs) {
            $('.page').on('mousedown', function (e) {
                var page = $(this);
                var page_num = pages.index(page) + 1;
                var page_w = page.outerWidth();
                var page_l = page.offset().left;
                var grabbed = '';
                var mouseX = e.pageX;
                if (page_num % 2 === 0) {
                    grabbed = 'verso';
                    var other_page = page.prev();
                    var centerX = page_l + page_w;
                } else {
                    grabbed = 'recto';
                    var other_page = page.next();
                    var centerX = page_l;
                }
                var leaf = page.add(other_page);
                var from_spine = mouseX - centerX;
                if (grabbed === 'recto') {
                    var deg = 90 * -(1 - from_spine / page_w);
                    page.css('transform', 'rotateY(' + deg + 'deg)');
                } else {
                    var deg = 90 * (1 + from_spine / page_w);
                    page.css('transform', 'rotateY(' + deg + 'deg)');
                }
                leaf.addClass('grabbing');
                $(window).on('mousemove', function (e) {
                    mouseX = e.pageX;
                    if (grabbed === 'recto') {
                        centerX = page_l;
                        from_spine = mouseX - centerX;
                        var deg = 90 * -(1 - from_spine / page_w);
                        page.css('transform', 'rotateY(' + deg + 'deg)');
                        other_page.css('transform', 'rotateY(' + (180 + deg) + 'deg)');
                    } else {
                        centerX = page_l + page_w;
                        from_spine = mouseX - centerX;
                        var deg = 90 * (1 + from_spine / page_w);
                        page.css('transform', 'rotateY(' + deg + 'deg)');
                        other_page.css('transform', 'rotateY(' + (deg - 180) + 'deg)');
                    }
                    console.log(deg, 180 + deg);
                });
                $(window).on('mouseup', function (e) {
                    leaf.removeClass('grabbing').css('transform', '');
                    $(window).off('mousemove');
                });
            });
        }
        $('.book').addClass('bound');
    });
    //@ sourceURL=pen.js
</script>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body>
</html>